<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationBarTitleText: "时节鉴赏",
  },
}
</route>

<script lang="ts" setup>
import type { Dayjs } from "dayjs";
import type { ActivityItem } from "@/service/app";
import dayjs from "dayjs";
import { storeToRefs } from "pinia";
import CalendarActivity from "@/components/calendar-activity/calendar-activity.vue";
import { BASE_URL, WEEK_ENUM } from "@/constants";
import { useCalendarStore } from "@/store";
import localeData from "dayjs/plugin/localeData";
import weekday from "dayjs/plugin/weekday";

dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.locale("zh-cn", {
  weekStart: 1,
});

const { calendarData } = storeToRefs(useCalendarStore());

const selectedDate = ref<Dayjs>(dayjs());
const goodsList = ref<ActivityItem[]>([]);

function handleSelectedItemChange(date: string, value: ActivityItem[]) {
  selectedDate.value = dayjs(date);
  goodsList.value = value;
}

const handleCardClick = (id: number) => {
  uni.navigateTo({ url: `/pages/goods/detail?id=${id}` });

}
</script>

<template>
  <view class="h-screen bg-blue-2 px-[12rpx] pt-[100rpx]">
    <!-- 日历 -->
    <CalendarActivity is-scroll :on-change="handleSelectedItemChange" />
    <view class="mt-6 ">
      <view class="flex flex-col gap-1 text-white font-600 px-3 mb-2">
        <text>{{ selectedDate.format("YYYY-MM-DD") }}</text>
        <text>星期{{ WEEK_ENUM[selectedDate?.weekday()] }}</text>
      </view>
      <!-- 商品列表 -->
      <view class="flex flex-col">
        <wd-card v-for="item of goodsList" :key="item.goodsId" custom-class="!py-2 !px-1"
        @click="() => handleCardClick(item.goodsId)"
        >
          <view class="w-full flex justify-between text-dark-2">
            <view class="flex gap-2">
              <wd-img
                :src="BASE_URL + item.cover"
                width="110"
                height="90"
                radius="4"
                mode="aspectFill"
              />
              <view class="flex flex-col justify-between text-[28rpx] w-[280rpx]">
                <text>{{ item.title }}</text>
                <view class="text-[30rpx]">
                  <text>￥{{ item.minPrice?.toFixed(2) ?? '-' }}</text> 
                  <text>起</text>
                </view>
              </view>
            </view>
            <view class="flex flex-col justify-between ">
              <wd-tag 
              :color="item.color" :bg-color="item.color"  plain round>
            <text>{{ item.type }}</text>
            </wd-tag>
              <text class="text-right text-[#999]">推荐</text>
            </view>
          </view>
        </wd-card>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
